<script lang="ts" setup>
import { queryBikeShortTermInfo } from '@/api/bike/index'
import { BikeInfoResponseData } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { ElMessage } from 'element-plus'
import { computed, defineAsyncComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
const bikeId = ref<string>('')
const dialogVisible = ref<boolean>(false)
const previousBikeId = ref<string | null>(null)
const data = ref<BikeInfoResponseData | null>(null)
const tableData = ref<any>(null)
const router = useRouter()
const open = async () => {
  if (bikeId.value !== previousBikeId.value) {
    previousBikeId.value = bikeId.value
    await getData()
  }
  dialogVisible.value = true
}
const setId = (newBikeId: string) => {
  bikeId.value = newBikeId
}
defineExpose({ open, setId })
const getData = async () => {
  try {
    const res = await queryBikeShortTermInfo({
      token: getToken() ?? '',
      bikeId: bikeId.value
    })
    if (res.statusCode == '0') {
      data.value = res.data
      tableData.value = [
        {
          bikeModel: res.data.bikeModel,
          bikeLockId: res.data.bikeLockId,
          bikeCode: res.data.bikeCode,
          frameNumber: res.data.frameNumber
        }
      ]
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('获取车辆信息失败')
  }
}
const seeLocation = () => {
  dialogVisible.value = false
  router.push({
    name: 'TimeBikeLocation',
    query: {
      bikeId: bikeId.value,
      storeId: data.value?.storeData?.storeId
    }
  })
}
const BatterySizePopover = defineAsyncComponent(
  () => import('@/components/popover/BatterySizeInfo.vue')
)
const TieredBillingInfo = defineAsyncComponent(
  () => import('@/components/popover/TieredBillingInfo.vue')
)
const TieredBillingTitle = computed(() => {
  return data.value?.productType === 'Tiered' ? '阶梯计费' : '按时长计费'
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="车辆信息"
    top="10vh"
    width="550px"
    class="bike-info-dialog"
  >
    <div class="store-info">
      <div class="store-info__image">
        <el-image
          v-for="(item, index) in data?.imageUrls.split(',')"
          :key="index"
          :src="item"
          :preview-src-list="data?.imageUrls.split(',')"
          :preview-teleported="true"
        />
      </div>
      <div class="store-info__title">
        <span>{{ data?.storeData.storeName }} </span>
        <span>营业时间&nbsp;:&nbsp;{{ data?.storeData.serviceTime }}</span>
      </div>
      <span class="store-info__contact"
        >商家信息:&nbsp;{{ data?.storeData.contactPerson }}/{{ data?.storeData.contactPhone }}</span
      >
      <div class="store-info__location">
        <span>{{ data?.storeData.address }}</span>
        <span class="red-click" @click="seeLocation">查看位置 ></span>
      </div>
    </div>
    <el-table
      :data="tableData"
      size="small"
      border
      mt-20
      :header-cell-style="{ background: 'var(--xy-hover-color)' }"
    >
      <el-table-column prop="bikeModel" label="车辆型号">
        <template #default="scope">
          <el-popover trigger="hover" width="auto">
            <el-image
              v-for="(item, index) in data?.productImageUrls.split(',')"
              :key="index"
              :src="item"
              :preview-src-list="data?.productImageUrls.split(',')"
            />
            <template #reference>
              <el-button link type="primary" class="is-open">{{ scope.row.bikeModel }}</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="frameNumber" label="车架号" />
      <el-table-column prop="bikeCode" label="车辆编号" />
      <el-table-column prop="bikeLockId" label="中控编号" />
      <el-table-column label="电池尺寸">
        <template #default>
          <el-popover trigger="hover" popper-class="battery-size_popover" width="auto">
            <battery-size-popover :data="data?.batterySize ?? []" />
            <template #reference>
              <el-button link type="primary" class="is-open">
                <span
                  v-for="(item, index) in data?.batterySizeDescription.split(',')"
                  :key="index"
                  >{{ item }}</span
                >
              </el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="tiered-billing-popover">
      <tiered-billing-info :data="data?.feeRules ?? []" :title="TieredBillingTitle" />
    </div>
  </el-dialog>
</template>

<style scoped></style>
